<template>
  <div id="box">
    <div class="box-header">
      <span style="margin: auto; font-size: 30px;font-weight: bold;">基于hadoop的租房数据分析与可视化研究</span>
<!--      <div class="header-left">-->
<!--        <img src=""-->
<!--          alt=""-->
<!--        />-->
<!--        <div class="header-title-right">-->
<!--          贵阳租房-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="header-right">-->
<!--        <img-->
<!--        src="../assets/imgs/icon-注册头像.png"-->
<!--        alt="#"-->
<!--        />-->
<!--        <div><span>{{sname}}</span></div>-->
<!--      </div>-->
    </div>
    <div class="box-subject">
      <div class="left">
        <ul>
          <li>
            <div class="title" @click="catalogueClick(0)">
              <span>房源分布</span>
              <img
                  src="../assets/imgs/unfold.png"
                  v-show="!catalogueShow1"
                  alt=""/>
              <img
                  src="../assets/imgs/fold.png"
                  v-show="catalogueShow1"
                  alt=""/>
            </div>
            <div class="isShow" v-show="catalogueShow1">
              <ul>
                <li>
                  <router-link :to="{path: '/index/map'}">房源分布</router-link>
                </li>
              </ul>
            </div>
          </li>
          <li>
            <div class="title" @click="catalogueClick(1)">
              <span>可视化集</span>
              <img
                  src="../assets/imgs/unfold.png"
                  v-show="!catalogueShow2"
                  alt=""/>
              <img
                  src="../assets/imgs/fold.png"
                  v-show="catalogueShow2"
                  alt=""/>
            </div>
            <div class="isShow" v-show="catalogueShow2">
              <ul>
                <li>
                  <router-link :to="{path: '/index/vis'}">可视化集</router-link>
                </li>
              </ul>
            </div>
          </li>
          <li>
            <div class="title" @click="catalogueClick(2)">
              <span>数据训练</span>
              <img
                  src="../assets/imgs/unfold.png"
                  v-show="!catalogueShow3"
                  alt=""/>
              <img
                  src="../assets/imgs/fold.png"
                  v-show="catalogueShow3"
                  alt=""/>
            </div>
            <div class="isShow" v-show="catalogueShow3">
              <ul>
                <li>数据训练</li>
              </ul>
            </div>
          </li>

          <li>
            <div class="title" @click="catalogueClick(3)">
              <span>数据管理</span>
              <img
                  src="../assets/imgs/unfold.png"
                  v-show="!catalogueShow4"
                  alt=""/>
              <img
                  src="../assets/imgs/fold.png"
                  v-show="catalogueShow4"
                  alt=""/>
            </div>
            <div class="isShow" v-show="catalogueShow4">
              <ul>
                <li>
                  <router-link :to="{path: '/index/data'}">数据管理</router-link>
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </div>

      <div class="right">
        <!-- 路由 -->
        <router-view></router-view>

      </div>

    </div>

  </div>
</template>

<!--js-->
<script>

  export default {
    name: 'SeismIndex',
    data(){
      return{ //获取用户信息到主页
        sname: sessionStorage.getItem('name'),
        smail: sessionStorage.getItem('mail'),
        stel: sessionStorage.getItem('tel'),
        isAuth: "",//是否保持登录状态
        catalogueShow1: false, // left div 隐藏或出现
        catalogueShow2: false, // left div 隐藏或出现
        catalogueShow3: false, // left div 隐藏或出现
        catalogueShow4: false, // left div 隐藏或出现
        imgsUrl: "",
        imgBeing: true,  // 控制小新
        imgLeave: false,  // 控制小新
      };
    },
    methods:{
      //当点击退出按钮，将不保存登录状态
      logout() {
        this.isAuth = "false";//修改登录状态
        sessionStorage.setItem('s', this.isAuth);
        this.$router.replace('/SeismLogin');//页面跳转至登录页面
      },
      leftShow(){

      },
      being(){
        // 在
        this.imgBeing = !this.imgBeing;
        this.imgLeave = !this.imgLeave;
      },
      leave() {
        // 离开
        this.imgBeing = !this.imgLeave;
        this.imgLeave = !this.imgBeing;
      },
      remove() {
        // 移动
      },
      catalogueClick(id) {
        if(id === 0) {
          this.catalogueShow1 = !this.catalogueShow1;
        }
        if(id === 1) {
          this.catalogueShow2 = !this.catalogueShow2;
        }
        if(id === 2) {
          this.catalogueShow3 = !this.catalogueShow3;
        }
        if(id === 3) {
          this.catalogueShow4 = !this.catalogueShow4;
        }
      }
    },
  };

</script>
<!--css-->
<style scoped>
@import "../assets/css/SeismIndex.css";
</style>